@import '../../../lessConst.less';

.pageGoldCoinsDetailPa {
  width: 100vw;
  background-color: #f7f7f7;
  overflow: hidden;
  height: 100vh;

  .header {
    background: url('@{iplandUrl}receiveGoldCoins/exchangeDetailedBj.jpg') no-repeat;
    background-size: 100% 100%;
    border-radius: 0 0 25% 25%;
    height: 25vh;
    position: sticky;

    .navbar {
      position: relative;

      .navBarContent {
        position: absolute;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;

        .navTitle {
          color: #fff;
          font-weight: 500;
        }

        .at-icon-chevron-left {
          color: #fff;
          position: absolute;
          left: 32px;
          font-size: 40px;
        }
      }
    }
  }

  .atTab {
    display: flex;
    height: 5vh;

    .at-tabs__header {
      flex-direction: row;
      background-color: transparent !important;
    }

    .at-tabs__item {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #666666 !important;
    }

    .at-tabs__item-underline {
      background-color: #fe6c06;
      width: 20%;
      height: 6px;
      left: 38%;
    }

    .at-tabs__item--active {
      color: #000 !important;
      font-weight: 600;
    }
  }

  .listRow {
    flex-direction: row;
    background-color: #fff;
    border-radius: 10px;
    height: 158px;
    margin: 20px 0;
    align-items: center;
    justify-content: center;

    .listLeft {
      padding: 0 20px;

      .listName {
        color: #333333;
        font-size: 24px;
        font-weight: bold;
        padding-bottom: 10px;
      }

      .listExtraLabel {
        color: #666666;
        font-size: 20px;
        padding-right: 10px;
      }

      .listExtra {
        display: flex;
        flex-direction: row;

        .listTime {
          color: #666666;
          font-size: 20px;
        }
      }
    }

    .listRight {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      padding-right: 30px;

      .listSuffix {
        font-size: 36px;
      }

      .listScore {
        font-size: 36px;
      }
    }
  }
}

.scrollViewContent {
  padding: 0 20px;
  height: 70vh;
}

.detailContent {
  padding: 30px 32px 0 32px;

  .userInfo {
    flex-direction: row;
    z-index: 9;
    height: 132px;
    background-color: #fff;
    border-radius: 80px;
    margin-top: -140px;
    box-shadow: 0 5px 10px #888888;

    align-items: center;
    justify-content: center;
    padding: 0 40px;

    .info {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: row;

      .hr {
        background-color: #ececec;
        width: 4px;
        height: 30px;
      }

      .title {
        color: #999999;
        font-size: 24px;
        padding-right: 20px;
      }
    }

    .jindouNum {
      color: #fe6810;
      font-size: 80px;
      font-weight: bold;
    }

    .jindou {
      width: 70px;
      height: 74px;
    }
  }
}

.loadingContent {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70vh;
}

.emptyContent {
  display: flex;
  align-items: center;
  justify-content: center;

  .emptyIcon {
    width: 404px;
    height: 404px;
  }

  .emptyExtraTitle {
    color: #999999;
    margin-top: -76px;
    font-size: 24px;
  }
}
